CANVAS要素で描画されない罠【▲→川俣晶の縁側→ソフトウェア→技術雑記】

　HTML5と心中する覚悟はできたので、CANVAS要素も使い始めました。(別に使い始めたのは今日というわけではありませんけど)

　いきなり、はまりましたねえ。

問題ない段階 §

　CANVAS要素dareaを書き込んで、マウスのイベントハンドラにこう書くわけです。

var context = document.getElementById('darea').getContext('2d');

context.fillRect(5, 5, 10, 10);

　ちゃんと指定した範囲が黒くなりますね。見事、ぱちぱち。

　最初にグレーで塗り潰して初期化するザンスよ～というわけで、背景を最初にグレーで塗るわけです。

var darea = document.getElementById('darea');

var context = darea.getContext('2d');

context.fillStyle = "rgb(230,230,230)";

context.fillRect(0, 0, darea.width, darea.height);

　はい、これでNGです。

　このコードを入れた結果、背景はグレイになりますが、最初のコードで黒く塗られなくなります。

　getContextメソッドで取得されるオブジェクトが同じようですね。だから、初期化時に設定されたグレイがそのまま残っていて、新規にコンテキストを取得しても色指定がグレイのまま。だから、fillRectは背景に塗ったグレイと同じグレイで描画するので何も描画していないように見えます。

var context = document.getElementById('darea').getContext('2d');

context.fillStyle = "Black";

context.fillRect(5, 5, 10, 10);

　これでいいみたいですね。

　コンテキスト依存度が強いわけで、実行される経路次第で発覚するバグが簡単に出そう。描画に関係するコンテキスト情報はいちいち全て設定する方が安全かも。トラブルメーカーCANVAS君と呼ぼうか。

　まあ、それでも他に無いからつかわにゃらんのですけどね。

　もちろん、CANVAS君だけがトラブルメーカーではありませんけどね!